<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body" v-for="(cartInfo,index) in cartList" :key='index'>
                <ul class="cart-list" v-for="cartItem in cartInfo.cartInfoList" :key="cartItem.id">
                    <li class="cart-list-con1">
                        <input type="checkbox" name="chk_list" :checked="cartItem.isChecked" @click.prevent="changeCheckCart(cartItem)">
                    </li>
                    <li class="cart-list-con2">
                        <img :src="cartItem.imgUrl">
                        <div class="item-msg">{{ cartItem.skuName }}</div>
                    </li>
                    <li class="cart-list-con4">
                        <span class="price">{{ cartItem.skuPrice?.toFixed(2) }}</span>
                    </li>
                    <li class="cart-list-con5">
                        <a href="javascript:void(0)" @click="changeSkuNum(-1,cartItem)" class="mins">-</a>
                        <input autocomplete="off" type="text" :value="cartItem.skuNum" minnum="1" class="itxt" @change="validateInputSkuNum($event,cartItem)">
                        <a href="javascript:void(0)" @click="changeSkuNum(+1,cartItem)" class="plus">+</a>
                    </li>
                    <li class="cart-list-con6">
                        <span class="sum">{{ (cartItem.skuNum * cartItem.skuPrice)?.toFixed(2) }}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a href="javascript:;" class="sindelet" @click="deleteCart(cartItem)">删除</a>
                        <br>
                        <a href="javascript:;">移到收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input class="chooseAll" type="checkbox" :checked="isCheckedAll" @click.prevent="isCheckedAllChange">
                <span>全选</span>
            </div>
            <div class="option">
                <a href="javascript:;" @click="deleteCheckedAll">删除选中的商品</a>
                <a href="javascript:;">移到我的关注</a>
                <a href="javascript:;">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择
                    <span>{{selectNum}}</span>件商品
                </div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{totalPrice?.toFixed(2)}}</i>
                </div>
                <div class="sumbtn">
                    <router-link class="sum-btn" to="/trade">结算</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
    name: 'ShopCart',
    mounted() {
        this.getCartList();
    },
    computed: {
        ...mapState('shopCart', ['cartList']),
        //选中商品数量
        selectNum(){
            return this.cartList.reduce((supPrev,cartInfo)=>{
               return cartInfo.cartInfoList.reduce((prev,itemInfo)=>{
                    if (itemInfo.isChecked == 1){
                        return prev+itemInfo.skuNum;
                    }else {
                        return prev
                    }
               },0)
            },0)
        },
        //总价
        totalPrice(){
            return this.cartList.reduce((supPrev,cartInfo)=>{
                return cartInfo.cartInfoList.reduce((prev,itemInfo)=>{
                    if (itemInfo.isChecked == 1){
                        return prev+itemInfo.skuNum*itemInfo.skuPrice;
                    }else {
                        return prev
                    }
                },0)
            },0)
        },
        //是否全不选中
        isCheckedAll:{
            get(){
                return this.cartList.every(cartInfo=>cartInfo.cartInfoList.every(itemInfo=>itemInfo.isChecked))
            },
        }
    },
    methods: {
        ...mapActions('shopCart', ['getCartList','setCheckCart','setDeleteCart','addShopCart','setBatchCheckCart','setBatchDeleteCart']),
        //修改选中的状态
        async changeCheckCart(cartItem){
            try {
            await this.setCheckCart({
                skuId:cartItem.skuId,
                isChecked:cartItem.isChecked==1?0:1
            });
            alert("修改状态成功");
            this.getCartList();
            }catch (error){
                alert("请求修改状态失败");
            }
        },
        //删除单条购物车数据
        async deleteCart(cartItem){
            try {
           if (confirm("你确定删除吗？")){
               await this.setDeleteCart(cartItem.skuId);
               this.getCartList();
           }
            }catch (error){
                alert(error.message);
            }
        },
        //对修改文本框数量进行校验
        validateInputSkuNum(e,cartItem){
            let value = Number(e.target.value);
            if (!value){
                alert("请输入正确的数量");
                this.$forceUpdate() //api重新渲染页面  数据不发生改变
                return
            }
            if (value < 1){
                alert("请输入大于一的数量");
                this.$forceUpdate() //api重新渲染页面  数据不发生改变
                return
            }
            if (parseInt(value) !== value){
                alert("请输入大于1的整数");
                this.$forceUpdate() //api重新渲染页面  数据不发生改变
                return
            };
            //传入的是数量之间的差值，不是直接修改的数量
            this.changeSkuNum(value-cartItem.skuNum,cartItem)
        },
        //修改数量
        async changeSkuNum(num,cartItem){
            if (num+cartItem.skuNum < 1){
                num = 1-cartItem.skuNum;
            }
            console.log(num,cartItem)
            try {
                await this.addShopCart({
                    skuId:cartItem.skuId,
                    skuNum:num
                })
                this.getCartList();
                alert("修改数量成功");
            }catch (e) {
                alert(e.message)
            }
        },
        //全选删除
        async deleteCheckedAll() {
            // 组装数据
            // 这里的idList是选中的idList,需要判断当前的选中状态来进行添加
            let skuIdList = this.cartList.reduce((supPrev, cartInfo) => {
                let res = cartInfo.cartInfoList.reduce((prev, cartItem) => {
                    if (cartItem.isChecked) { // 判断是否选中 1代表选中 0代表没选中
                        return prev.concat(cartItem.skuId)
                    } else {
                        return prev
                    }
                }, [])
                return supPrev.concat(res)
            }, []);
        
            // 校验数据
            // 没有选中不能删除
            if (!skuIdList.length) {
                alert('没有选中,不能删除')
                return
            }
        
            // 发送请求
            try {
                await this.setBatchDeleteCart(skuIdList);
                alert('删除选中商品成功');
                this.getCartList(); // 刷新页面
            } catch (error) {
                alert(error);
                console.error(error);
            }
        },
        //全选或全不选
        async isCheckedAllChange(){
            const val = !this.isCheckedAll;
            try {
                let skuIdList = this.cartList.reduce((supPrev,cartInfo)=>{
                    let res = cartInfo.cartInfoList.reduce((prev,itemInfo)=>{
                        return prev.concat(itemInfo.skuId)
                    },[])
                    return supPrev.concat(res);
                },[])
                console.log(skuIdList)
                await this.setBatchCheckCart({
                    isChecked:val?1:0,
                    skuIdList:skuIdList
                })
                this.getCartList();
            }catch (e) {
                alert(e.message)
                console.dir("修改全部状态失败",e)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.cart {
    width: 1200px;
    margin: 0 auto;
    
    h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
    }
    
    .cart-main {
        .cart-th {
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;
            
            & > div {
                float: left;
            }
            
            .cart-th1 {
                width: 25%;
                
                input {
                    vertical-align: middle;
                }
                
                span {
                    vertical-align: middle;
                }
            }
            
            .cart-th2 {
                width: 25%;
            }
            
            .cart-th3,
            .cart-th4,
            .cart-th5,
            .cart-th6 {
                width: 12.5%;
            }
        }
        
        .cart-body {
            margin: 15px 0;
            border: 1px solid #ddd;
            
            .cart-list {
                padding: 10px;
                border-bottom: 1px solid #ddd;
                overflow: hidden;
                
                & > li {
                    float: left;
                }
                
                .cart-list-con1 {
                    width: 15%;
                }
                
                .cart-list-con2 {
                    width: 35%;
                    
                    img {
                        width: 82px;
                        height: 82px;
                        float: left;
                    }
                    
                    .item-msg {
                        float: left;
                        width: 150px;
                        margin: 0 10px;
                        line-height: 18px;
                    }
                }
                
                .cart-list-con4 {
                    width: 10%;
                }
                
                .cart-list-con5 {
                    width: 17%;
                    
                    .mins {
                        border: 1px solid #ddd;
                        border-right: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                    
                    input {
                        border: 1px solid #ddd;
                        width: 40px;
                        height: 33px;
                        float: left;
                        text-align: center;
                        font-size: 14px;
                    }
                    
                    .plus {
                        border: 1px solid #ddd;
                        border-left: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                }
                
                .cart-list-con6 {
                    width: 10%;
                    
                    .sum {
                        font-size: 16px;
                    }
                }
                
                .cart-list-con7 {
                    width: 13%;
                    
                    a {
                        color: #666;
                    }
                }
            }
        }
    }
    
    .cart-tool {
        overflow: hidden;
        border: 1px solid #ddd;
        
        .select-all {
            padding: 10px;
            overflow: hidden;
            float: left;
            
            span {
                vertical-align: middle;
            }
            
            input {
                vertical-align: middle;
            }
        }
        
        .option {
            padding: 10px;
            overflow: hidden;
            float: left;
            
            a {
                float: left;
                padding: 0 10px;
                color: #666;
            }
        }
        
        .money-box {
            float: right;
            
            .chosed {
                line-height: 26px;
                float: left;
                padding: 0 10px;
            }
            
            .sumprice {
                width: 200px;
                line-height: 22px;
                float: left;
                padding: 0 10px;
                
                .summoney {
                    color: #c81623;
                    font-size: 16px;
                }
            }
            
            
            .sumbtn {
                float: right;
                
                a {
                    display: block;
                    position: relative;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    font-family: "Microsoft YaHei";
                    background: #e1251b;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>